Jassif Team Institution

HTML Web Storage API

HTML Web Storage API; குக்கீகளை விட சிறந்தது.

HTML வலை சேமிப்பு என்றால் என்ன?

வலை சேமிப்புடன், பயன்பாடுகள் பயனரின் உலாவியில் உள்ளூரில் தரவுகளை சேமிக்க முடியும்.

HTML5 க்கு முன், பயன்பாட்டுத் தரவு குக்கீகளில் சேமிக்கப்பட வேண்டியிருந்தது, இது ஒவ்வொரு சர்வர் கோரிக்கையிலும் சேர்க்கப்பட்டது. வலை சேமிப்பு மிகவும் பாதுகாப்பானது, மற்றும் பெரிய அளவிலான தரவுகள் உள்நாட்டில் சேமிக்கப்படலாம், இது வலைத்தள செயல்திறனை பாதிக்காது.

குக்கீகளைப் போலன்றி, சேமிப்பு வரம்பு மிகவும் பெரியது (குறைந்தது 5MB) மற்றும் தகவல் சர்வருக்கு மாற்றப்படாது.

வலை சேமிப்பு தோற்றம் அடிப்படையில் (டொமைன் மற்றும் நெறிமுறை அடிப்படையில்) உள்ளது. ஒரு தோற்றத்திலிருந்து அனைத்து பக்கங்களும் ஒரே தரவை சேமிக்கவும் அணுகவும் முடியும்.

வலை சேமிப்பு API பொருள்கள்

வலை சேமிப்பு உலாவியில் தரவை சேமிக்க இரண்டு பொருள்களை வழங்குகிறது:

உலாவி ஆதரவு

அட்டவணையில் உள்ள எண்கள் வலை சேமிப்பை முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கின்றன.

வலை சேமிப்பு API ஆதரவை சோதிக்கவும்

வலை சேமிப்பைப் பயன்படுத்துவதற்கு முன், localStorage மற்றும் sessionStorage க்கான உலாவி ஆதரவை விரைவாக சரிபார்க்கலாம்:

<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
  x.innerHTML = "Your browser supports Web storage!";
} else {
  x.innerHTML = "Sorry, no Web storage support!";
}
</script>

localStorage பொருள்

localStorage பொருள் காலாவதி தேதி இல்லாமல் தரவை சேமிக்கிறது. உலாவி மூடப்பட்டாலும் தரவு இழக்கப்படாது, மேலும் அடுத்த நாள், வாரம் அல்லது வருடத்தில் கிடைக்கும்.

<script>
const x = document.getElementById("result");

if (typeof(Storage) !== "undefined") {
  // சேமிக்கவும்
  localStorage.setItem("lastname", "Smith");
  localStorage.setItem("bgcolor", "yellow");
  // மீட்டெடுக்கவும்
  x.innerHTML = localStorage.getItem("lastname");
  x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
  x.innerHTML = "Sorry, no Web storage support!";
}
</script>

எடுத்துக்காட்டு விளக்கம்:

1. பெயர்/மதிப்பு ஜோடிகளை உருவாக்க localStorage.setItem() முறையைப் பயன்படுத்தவும்
2. அமைக்கப்பட்ட மதிப்புகளை மீட்டெடுக்க localStorage.getItem() முறையைப் பயன்படுத்தவும்
3. "lastname" மதிப்பை மீட்டெடுத்து id="result" உள்ள உறுப்பில் செருகவும்
4. "bgcolor" மதிப்பை மீட்டெடுத்து id="result" உள்ள உறுப்பின் பின்னணி நிறத்தில் செருகவும்

"lastname" localStorage உருப்படியை அகற்றுவதற்கான தொடரியல் பின்வருமாறு:

localStorage.removeItem("lastname");

localStorage உடன் கிளிக்குகளை எண்ணுதல்

பின்வரும் எடுத்துக்காட்டு ஒரு பயனர் ஒரு பொத்தானை எத்தனை முறை கிளிக் செய்துள்ளார் என்பதை எண்ணுகிறது. இந்த குறியீட்டில் கவுண்டரை அதிகரிக்க முடியும் வகையில் மதிப்பு சரம் எண்ணாக மாற்றப்படுகிறது:

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>

sessionStorage பொருள்

sessionStorage பொருள் localStorage பொருளுக்கு சமம், இது ஒரு அமர்வுக்கு மட்டுமே தரவை சேமிக்கிறது! பயனர் குறிப்பிட்ட உலாவி தாவலை மூடும்போது தரவு நீக்கப்படும்.

sessionStorage உடன் கிளிக்குகளை எண்ணுதல்

பின்வரும் எடுத்துக்காட்டு ஒரு பயனர் தற்போதைய அமர்வில் ஒரு பொத்தானை எத்தனை முறை கிளிக் செய்துள்ளார் என்பதை எண்ணுகிறது:

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>

வலை சேமிப்பு முறைகள்

பயிற்சி